<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%@ taglib prefix="fmt" uri="jakarta.tags.fmt" %>
<html>
<head>
    <title>修改供应商信息</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        /* 整体页面背景设置为浅灰色系，营造简洁科技感 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f5;
            margin: 0;
            padding: 0;
            color: #333;
        }

        /* 页面主容器，设置宽度、居中、内边距、背景色及轻微阴影效果 */
        .main-container {
            width: 60%;
            margin: 30px auto;
            padding: 30px;
            background-color: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }

        /* 标题样式，字体大小、加粗、颜色及下边距 */
        h1 {
            font-size: 24px;
            font-weight: bold;
            color: #007bff;
            margin-bottom: 20px;
            text-align: center;
        }

        /* 表单样式 */
        form {
            padding: 20px;
            border: none;
            background-color: transparent;
        }

        /* 表单标签样式 */
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #495057;
        }

        /* 表单输入框样式 */
        input[type="text"],
        input[type="number"],
        select {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            box-sizing: border-box;
        }

        input[type="text"]:focus,
        input[type="number"]:focus,
        select:focus {
            border-color: #80bdff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        /* 只读输入框样式 */
        input[readonly] {
            background-color: #e9ecef;
            border-color: #ced4da;
            cursor: not-allowed;
        }

        /* 提交按钮样式 */
        input[type="submit"] {
            display: inline-block;
            width: auto;
            padding: 10px 20px;
            border-radius: 4px;
            font-size: 16px;
            color: white;
            background-color: #28a745;
            border: none;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #218838;
        }

        /* 返回按钮样式 */
        .back-button {
            display: inline-block;
            width: auto;
            padding: 10px 20px;
            border-radius: 4px;
            font-size: 16px;
            color: white;
            background-color: #6c757d;
            border: none;
            cursor: pointer;
            text-decoration: none;
            margin-left: 10px;
        }

        .back-button:hover {
            background-color: #5a6268;
        }

        /* 错误提示信息样式 */
        .error-message {
            color: #dc3545;
            margin-bottom: 10px;
            font-size: 14px;
            display: none;
        }

        /* 表单组样式，增强布局结构 */
        .form-group {
            margin-bottom: 20px;
        }

        /* 按钮容器样式，将按钮水平排列并居右对齐 */
        .button-container {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="main-container">
    <h1>修改供应商信息</h1>
    <form action="supplier.action?action=update" method="post" id="updateForm">
        <!-- 显示供应商 ID，但设置为只读，不允许修改 -->
        <div class="form-group">
            <label for="id">供应商 ID</label>
            <input type="text" id="id" name="id" value="${supplier.id}" readonly>
            <span class="error-message" id="idError">供应商 ID 不能为空</span>
        </div>

        <div class="form-group">
            <label for="name">供应商名称</label>
            <input type="text" id="name" name="name" value="${supplier.name}" required>
            <span class="error-message" id="nameError">供应商名称不能为空，且长度不超过50个字符</span>
        </div>

        <div class="form-group">
            <label for="address">供应商地址</label>
            <input type="text" id="address" name="address" value="${supplier.address}" required>
            <span class="error-message" id="addressError">供应商地址不能为空，且长度不超过100个字符</span>
        </div>

        <div class="form-group">
            <label for="phone">供应商号码</label>
            <input type="text" id="phone" name="phone" value="${supplier.phone}" required>
            <span class="error-message" id="phoneError">供应商号码不能为空，且应为 11 位的电话号码</span>
        </div>

        <div class="form-group">
            <label for="state">供应商状态</label>
            <select id="state" name="state" required>
                <option value="1" ${supplier.state == 1? 'selected' : ''}>在供货</option>
                <option value="0" ${supplier.state == 0? 'selected' : ''}>已停止供货</option>
            </select>
            <span class="error-message" id="stateError">请选择供应商状态</span>
        </div>

        <div class="button-container">
            <div class="form-group">
                <input type="submit" value="提交">
            </div>
            <div class="form-group">
                <a href="supplier.action?action=list" class="back-button">返回</a>
            </div>
        </div>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.getElementById('updateForm').addEventListener('submit', function (e) {
            var isValid = true;
            var id = document.getElementById('id').value;
            var name = document.getElementById('name').value;
            var address = document.getElementById('address').value;
            var phone = document.getElementById('phone').value;
            var state = document.getElementById('state').value;

            // 供应商 ID 验证
            if (id === '') {
                document.getElementById('idError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('idError').style.display = 'none';
            }

            // 供应商名称验证
            if (name === '') {
                document.getElementById('nameError').style.display = 'block';
                isValid = false;
            } else if (name.length > 50) {
                document.getElementById('nameError').innerHTML = "供应商名称应简洁明了，长度不超过50个字符";
                document.getElementById('nameError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('nameError').style.display = 'none';
            }

            // 供应商地址验证
            if (address === '') {
                document.getElementById('addressError').style.display = 'block';
                isValid = false;
            } else if (address.length > 100) {
                document.getElementById('addressError').innerHTML = "供应商地址长度不超过100个字符";
                document.getElementById('addressError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('addressError').style.display = 'none';
            }

            // 供应商号码验证
            if (phone === '') {
                document.getElementById('phoneError').style.display = 'block';
                isValid = false;
            } else if (!/^\d{11}$/.test(phone)) {
                document.getElementById('phoneError').innerHTML = "请输入 11 位的电话号码";
                document.getElementById('phoneError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('phoneError').style.display = 'none';
            }

            // 供应商状态验证
            if (state === '') {
                document.getElementById('stateError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('stateError').style.display = 'none';
            }


            if (!isValid) {
                e.preventDefault();
                Swal.fire({
                    icon: 'error',
                    title: '输入错误',
                    html: errorMessages.join('<br>')
                });
            } else {
                e.preventDefault();
                //const formData = new FormData(this);
                var formData = $(this).serialize();
                $.ajax({
                    url: 'supplier.action?action=update',
                    type: 'POST',
                    data: formData,
                    //processData: false,
                    // contentType: false,
                    success: function (response) {
                        if (response.startsWith("修改成功")) {
                            Swal.fire({
                                icon: 'success',
                                title: '修改成功',
                                text: '供应商信息修改成功'
                            }).then(function () {
                                window.location.href = 'supplier.action?action=list';
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: '修改失败',
                                text: response
                            }).then(function () {
                                window.location.reload();
                            })
                        }
                    },
                    error: function (xhr, status, error) {
                        Swal.fire({
                            icon: 'error',
                            title: '请求出错',
                            text: '出现网络问题或服务器错误，请稍后再试'
                        });
                    }
                });
            }
        });
    </script>
</div>
</body>
</html>